import { View } from "@tarojs/components";
import { NavBar, Button, Toast } from "@antmjs/vantui";
import { IconFont } from "../../../../components";
import Taro,{getMenuButtonBoundingClientRect} from "@tarojs/taro";
import { useState } from "react";
import { getUserInfo } from '../../../../utils/const'
import './index.scss'

const MyCoins = () => {
    const btn = getMenuButtonBoundingClientRect();
    const [show, setShow] = useState(false)
    //订阅会员
    const activateMembership = () => {
        // const videoAd = Taro.createRewardedVideoAd({ adUnitId: 'adunit-7db004f783645a1f', appSid: 'wx02e87e9d862d6304' });
        // videoAd
        //     .show()
        //     .then(() => {
        //         console.log('广告显示成功');
        //     })
        //     .catch((err) => {
        //         console.log('广告组件出现问题', err);
        //         // 可以手动加载一次
        //         videoAd.load().then(() => {
        //             console.log('手动加载成功');
        //             // 加载成功后需要再显示广告
        //             return videoAd.show();
        //         });
        //     });
        // videoAd.onError((err) => {
        //     console.log('广告加载报错')
        //     videoAd.onClose((res) => {
        //         if (res && res.isEnded) {
        //             console.log('广告看完给奖励')
        //         } else {
        //             Toast.fail({ message: '中途退出，无法获取奖励！' })
        //         }

        //     })
        // })

          // 若在开发者工具中无法预览广告，请切换开发者工具中的基础库版本
        // 在页面中定义激励视频广告
        let videoAd = null

        // 在页面onLoad回调事件中创建激励视频广告实例
        if (wx.createRewardedVideoAd) {
            videoAd = wx.createRewardedVideoAd({
                adUnitId: 'adunit-7db004f783645a1f', 
                appSid: 'wx02e87e9d862d6304'
            })
            videoAd.onLoad(() => { })
            videoAd.onError((err) => {
                console.error('激励视频光告加载失败', err)
            })
            videoAd.onClose((res) => {
                videoAd.offClose()   //加在这里，而不是if后面
                if (res && res.isEnded) {
                    // 写入你想奖励的内容
                  
                }
                else { }
            })
        }

        // 用户触发广告后，显示激励视频广告
        if (videoAd) {
            videoAd.show().catch(() => {
                // 失败重试
                videoAd.load()
                    .then(() => videoAd.show())
                    .catch(err => {
                        console.error('激励视频 广告显示失败', err)
                    })
            })
        }
    }

    //获取金币
    const obtainGoldCoins = () => {
        Taro.navigateTo({ url: '/pages/mine/components/coninsdetail/index' })
    }

    return (
        <View className="mycoins-frame-view">
            <NavBar title='我的金币' leftArrow leftText={'返回'} onClickLeft={() => Taro.navigateBack()} fixed/>
            <View className="adfree-view" style={{paddingTop:btn.bottom+20}}>
                <IconFont name="ac-jinbi2" size={200} />
                <View className="info-text-view">
                    <View className="title-view">{getUserInfo()?.coin}</View>
                    <View className="subtitle-view">每观看一次视频广告可获得金币1枚！每日签到也可获取相应的金币！</View>
                </View>
                <View className="bottom-bg-view">
                    <Button onClick={activateMembership} className="moon-view" type='primary'>获得金币</Button>
                    <Button onClick={obtainGoldCoins} className="more-view" plain hairline type="primary">金币明细</Button>
                </View>
            </View>
        </View>
    )
}

export default MyCoins